<template>
  <div class="business-login-page">
    <!-- 背景装饰元素 -->
    <div class="bg-decorations">
      <!-- 网络连接线条 -->
      <div class="network-lines">
        <div class="line line-1"></div>
        <div class="line line-2"></div>
        <div class="line line-3"></div>
        <div class="line line-4"></div>
        <div class="line line-5"></div>
      </div>
      
      <!-- 浮动的教育图标 -->
      <div class="floating-icons">
        <div class="icon icon-1">📚</div>
        <div class="icon icon-2">💻</div>
        <div class="icon icon-3">🎓</div>
        <div class="icon icon-4">📊</div>
        <div class="icon icon-5">🌐</div>
        <div class="icon icon-6">💡</div>
      </div>
      
      <!-- 几何图案 -->
      <div class="geometric-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
      </div>
    </div>

    <!-- 重置密码对话框 -->
    <el-dialog 
      v-model="showResetDialog" 
      title="重置登录密码" 
      width="480px" 
      :close-on-click-modal="false"
      class="business-dialog"
    >
      <el-form ref="resetFormRef" :model="resetForm" :rules="resetRules" label-width="0">
        <el-form-item prop="phone">
          <el-input v-model="resetForm.phone" placeholder="请输入手机号" maxlength="11" size="large" />
        </el-form-item>
        <el-form-item prop="verifyCode">
          <div class="verify-code-input">
            <el-input v-model="resetForm.verifyCode" placeholder="请输入验证码" maxlength="4" size="large" />
            <el-button 
              type="primary" 
              size="large"
              :disabled="resetCountdown > 0"
              @click="sendResetSmsCode"
              class="verify-btn"
            >
              {{ resetCountdown > 0 ? `${resetCountdown}s后重新获取` : '获取验证码' }}
            </el-button>
          </div>
          <!-- 重置密码自动填入验证码开关 -->
          <div class="auto-fill-option">
            <el-checkbox v-model="autoFillCode" size="small">
              <span class="auto-fill-text">自动填入验证码</span>
            </el-checkbox>
          </div>
        </el-form-item>
        <el-form-item prop="newPassword">
          <el-input v-model="resetForm.newPassword" type="password" placeholder="请输入新密码" size="large" />
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input v-model="resetForm.confirmPassword" type="password" placeholder="请再次输入新密码" size="large" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showResetDialog = false" size="large">取消</el-button>
          <el-button type="primary" @click="handleResetPassword" size="large">确认重置</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 主要内容 -->
    <div class="main-container">
      <!-- 左侧品牌区域 -->
      <div class="brand-section">
        <div class="brand-content">
          <div class="brand-logo">
            <div class="logo-icon">
              <svg viewBox="0 0 100 100" fill="none">
                <circle cx="50" cy="50" r="45" stroke="url(#gradient1)" stroke-width="3" fill="none"/>
                <circle cx="50" cy="50" r="35" stroke="url(#gradient2)" stroke-width="2" fill="none"/>
                <path d="M30 40 L50 30 L70 40 L70 60 L50 70 L30 60 Z" fill="url(#gradient3)" opacity="0.8"/>
                <circle cx="50" cy="50" r="8" fill="white"/>
                <defs>
                  <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color:#4A90E2"/>
                    <stop offset="100%" style="stop-color:#7BB3F0"/>
                  </linearGradient>
                  <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color:#5BA0F2"/>
                    <stop offset="100%" style="stop-color:#8CC8FF"/>
                  </linearGradient>
                  <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color:#4A90E2"/>
                    <stop offset="100%" style="stop-color:#6BB0FF"/>
                  </linearGradient>
                </defs>
              </svg>
            </div>
            <div class="logo-text">
              <h1>EduLiveLink</h1>
              <p>智能直播互动教育平台</p>
            </div>
          </div>
          
          <div class="brand-features">
            <div class="feature-item">
              <div class="feature-icon">🎯</div>
              <div class="feature-text">
                <h3>智能教学</h3>
                <p>AI驱动的个性化学习体验</p>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon">🌐</div>
              <div class="feature-text">
                <h3>实时互动</h3>
                <p>多人在线协作学习环境</p>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon">📊</div>
              <div class="feature-text">
                <h3>数据分析</h3>
                <p>学习进度可视化管理</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧登录区域 -->
      <div class="login-section">
        <div class="login-card-wrapper">
          <div class="login-card-header">
            <h2>欢迎回来</h2>
            <p>登录您的教育账户，开启智慧学习之旅</p>
          </div>
          
          <div class="login-card">
            <!-- 标签页切换 -->
            <div class="login-tabs">
              <div 
                class="tab-item"
                :class="{ active: activeTab === 'password' }"
                @click="switchTab('password')"
              >
                <span>密码登录</span>
              </div>
              <div 
                class="tab-item"
                :class="{ active: activeTab === 'sms' }"
                @click="switchTab('sms')"
              >
                <span>短信登录</span>
              </div>
            </div>
            
            <!-- 登录表单 -->
            <div class="login-form">
              <!-- 用户名/手机号输入框 -->
              <div class="input-group">
                <label class="input-label">
                  {{ activeTab === 'password' ? '账号' : '手机号' }}
                </label>
                <el-input
                  v-if="activeTab === 'password'"
                  v-model="account"
                  placeholder="请输入您的账号"
                  :prefix-icon="User"
                  size="large"
                  class="business-input"
                />
                <el-input
                  v-else
                  v-model="phone"
                  placeholder="请输入您的手机号"
                  :prefix-icon="Iphone"
                  size="large"
                  maxlength="11"
                  class="business-input"
                />
              </div>
              
              <!-- 密码/验证码输入框 -->
              <div class="input-group">
                <label class="input-label">
                  {{ activeTab === 'password' ? '密码' : '验证码' }}
                </label>
                <el-input
                  v-if="activeTab === 'password'"
                  v-model="password"
                  :type="showPassword ? 'text' : 'password'"
                  placeholder="请输入您的密码"
                  :prefix-icon="Lock"
                  :suffix-icon="showPassword ? View : Hide"
                  @click:suffix="togglePassword"
                  size="large"
                  class="business-input"
                />
                <div v-else class="sms-input-group">
                  <el-input
                    v-model="smsCode"
                    placeholder="请输入验证码"
                    :prefix-icon="Lock"
                    size="large"
                    maxlength="4"
                    class="business-input sms-input"
                  />
                  <el-button
                    type="primary"
                    size="large"
                    :disabled="countdown > 0"
                    @click="sendSmsCode"
                    class="sms-btn"
                  >
                    {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
                  </el-button>
                </div>
                <!-- 自动填入验证码开关 -->
                <div class="auto-fill-option">
                  <el-checkbox v-model="autoFillCode" size="small">
                    <span class="auto-fill-text">自动填入验证码</span>
                  </el-checkbox>
                </div>
              </div>
              
              <!-- 登录按钮 -->
              <el-button
                type="primary"
                size="large"
                class="business-login-btn"
                @click="handleLogin"
                :loading="loginLoading"
              >
                <span>立即登录</span>
                <div class="btn-arrow">→</div>
              </el-button>
              
              <!-- 注册和忘记密码链接 -->
              <div class="helper-links">
                <el-link class="helper-link" @click="goToRegister">
                  <span>还没有账户？立即注册</span>
                </el-link>
                <el-link class="helper-link" @click="showResetDialog = true">
                  <span>忘记密码？</span>
                </el-link>
              </div>
              
              <!-- 其他登录方式 -->
              <div class="other-login">
                <div class="divider">
                  <span>其他登录方式</span>
                </div>
                <div class="social-login-group">
                  <div class="social-login-item" @click="wechatLogin">
                    <div class="social-icon wechat-icon">
                      <el-icon><ChatDotRound /></el-icon>
                    </div>
                    <span>微信登录</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { User, Lock, View, Hide, ChatDotRound, Iphone } from '@element-plus/icons-vue';
import { ElMessage, ElCheckbox } from 'element-plus';
import { userApi } from '@/api/user.js';

const router = useRouter();
const route = useRoute();

const activeTab = ref('password');
const account = ref('');
const password = ref('');
const phone = ref('');
const smsCode = ref('');
const showPassword = ref(false);
const countdown = ref(0);
const showResetDialog = ref(false);
const resetCountdown = ref(0);
const resetFormRef = ref();
const generatedSmsCode = ref(''); // 存储生成的验证码
const autoFillCode = ref(true); // 控制是否自动填入验证码
const loginLoading = ref(false); // 登录加载状态

const resetForm = ref({
  phone: '',
  verifyCode: '',
  newPassword: '',
  confirmPassword: ''
});

const generatedResetCode = ref(''); // 存储重置密码的验证码

const validateResetConfirmPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== resetForm.value.newPassword) {
    callback(new Error('两次输入密码不一致'));
  } else {
    callback();
  }
};

const resetRules = ref({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  verifyCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码长度为6位', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, trigger: 'blur', validator: validateResetConfirmPassword }
  ]
});

const startResetCountdown = () => {
  resetCountdown.value = 60;
  const timer = setInterval(() => {
    resetCountdown.value--;
    if (resetCountdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

const sendResetSmsCode = () => {
  if (!validatePhone(resetForm.value.phone)) {
    ElMessage.error('请输入正确的手机号');
    return;
  }
  
  // 生成四位数验证码
  generatedResetCode.value = generateSmsCode();
  
  // 根据设置决定是否自动填入验证码
  if (autoFillCode.value) {
    resetForm.value.verifyCode = generatedResetCode.value;
  }
  
  startResetCountdown();
  
  // 显示验证码（实际项目中应该通过短信发送）
  ElMessage.success(`验证码已发送到 ${resetForm.value.phone}，验证码：${generatedResetCode.value}`);
  
  // 在控制台显示验证码，方便测试
  console.log('重置密码验证码:', generatedResetCode.value);
};

const handleResetPassword = async () => {
  if (!resetFormRef.value) return;
  
  // 验证验证码
  if (resetForm.value.verifyCode !== generatedResetCode.value) {
    ElMessage.error('验证码错误，请重新输入');
    return;
  }
  
  await resetFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log('reset password form:', resetForm.value);
      ElMessage.success('密码重置成功');
      showResetDialog.value = false;
      // Reset form after successful password reset
      resetFormRef.value?.resetFields();
      generatedResetCode.value = ''; // 清空验证码
    } else {
      console.log('reset password error:', fields);
    }
  });
};

const switchTab = (tab) => {
  activeTab.value = tab;
};

const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

const validatePhone = (phone) => {
  return /^1[3-9]\d{9}$/.test(phone);
};

const startCountdown = () => {
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

// 生成四位数验证码
const generateSmsCode = () => {
  return Math.floor(1000 + Math.random() * 9000).toString();
};

const sendSmsCode = () => {
  if (!validatePhone(phone.value)) {
    ElMessage.error('请输入正确的手机号');
    return;
  }
  
  // 生成四位数验证码
  generatedSmsCode.value = generateSmsCode();
  
  // 根据设置决定是否自动填入验证码
  if (autoFillCode.value) {
    smsCode.value = generatedSmsCode.value;
  }
  
  startCountdown();
  
  // 显示验证码（实际项目中应该通过短信发送）
  ElMessage.success(`验证码已发送到 ${phone.value}，验证码：${generatedSmsCode.value}`);
  
  // 在控制台显示验证码，方便测试
  console.log('生成的验证码:', generatedSmsCode.value);
};

const handleLogin = async () => {
  loginLoading.value = true;
  
  try {
    if (activeTab.value === 'password') {
      if (!account.value || !password.value) {
        ElMessage.error('请输入账号和密码');
        loginLoading.value = false;
        return;
      }
      
      // 调用后端登录接口
      const loginData = {
        username: account.value,
        password: password.value
      };
      
      console.log('发送登录请求:', loginData);
      const response = await userApi.login(loginData);
      console.log('登录响应:', response);
      
      // 存储token和userId为全局变量
      const { token, userId ,classId } = response.data;
      localStorage.setItem('userToken', token);
      localStorage.setItem('userId', userId);
      localStorage.setItem('classId',classId);
      
      // 使用userId获取用户详细信息
      try {
        const profileResponse = await userApi.getProfileById(userId);
        const userInfo = {
          name: profileResponse.data.name || account.value,
          role: profileResponse.data.role || 'user',
          account: account.value,
          ...profileResponse.data
        };
        sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
      } catch (profileError) {
        // 如果获取详细信息失败，使用登录接口返回的基本信息
        const userInfo = {
          name: response.data.name || account.value,
          role: response.data.role || 'user',
          account: account.value
        };
        sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
      }
      
      ElMessage.success('登录成功！正在跳转...');
      setTimeout(() => {
        router.push('/home');
      }, 100);
    } else {
      if (!validatePhone(phone.value)) {
        ElMessage.error('请输入正确的手机号');
        loginLoading.value = false;
        return;
      }
      if (!smsCode.value || smsCode.value.length !== 4) {
        ElMessage.error('请输入4位验证码');
        loginLoading.value = false;
        return;
      }
      if (smsCode.value !== generatedSmsCode.value) {
        ElMessage.error('验证码错误，请重新输入');
        loginLoading.value = false;
        return;
      }
      
      // 调用后端短信登录接口
      const loginData = {
        phone: phone.value,
        code: smsCode.value
      };
      
      console.log('发送短信登录请求:', loginData);
      const response = await userApi.login(loginData);
      console.log('短信登录响应:', response);
      
      // 存储token和userId为全局变量
      const { token, userId } = response.data;
      localStorage.setItem('userToken', token);
      localStorage.setItem('userId', userId);
      
      // 使用userId获取用户详细信息
      try {
        const profileResponse = await userApi.getProfileById(userId);
        const userInfo = {
          name: profileResponse.data.name || '用户',
          role: profileResponse.data.role || 'user',
          phone: phone.value,
          ...profileResponse.data
        };
        sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
      } catch (profileError) {
        // 如果获取详细信息失败，使用登录接口返回的基本信息
        const userInfo = {
          name: response.data.name || '用户',
          role: response.data.role || 'user',
          phone: phone.value
        };
        sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
      }
      
      ElMessage.success('登录成功！正在跳转...');
      setTimeout(() => {
        router.push('/home');
      }, 100);
    }
  } catch (error) {
    console.error('登录失败:', error);
    ElMessage.error(error.response?.data?.message || '登录失败，请检查账号密码');
  } finally {
    loginLoading.value = false;
  }
};

const wechatLogin = () => {
  ElMessage.info('微信登录功能开发中...');
};

const goToRegister = () => {
  router.push('/register');
};

// 组件挂载时检查路由参数
onMounted(() => {
  // 检查是否有从注册页面传递过来的账号参数
  if (route.query.account) {
    account.value = route.query.account;
    activeTab.value = 'password'; // 确保切换到密码登录模式
    ElMessage.success('已为您自动填入注册时的账号，请输入密码登录');
  }
});
</script>

<style scoped>
/* 主页面样式 */
.business-login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 25%, #4a90e2 50%, #6bb6ff 75%, #87ceeb 100%);
  position: relative;
  overflow: hidden;
}

/* 背景装饰元素 */
.bg-decorations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* 网络连接线条 */
.network-lines {
  position: absolute;
  width: 100%;
  height: 100%;
}

.line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: networkFlow 8s infinite linear;
}

.line-1 {
  top: 15%;
  left: -50%;
  width: 200%;
  height: 1px;
  animation-delay: 0s;
}

.line-2 {
  top: 35%;
  left: -50%;
  width: 200%;
  height: 1px;
  animation-delay: 2s;
}

.line-3 {
  top: 55%;
  left: -50%;
  width: 200%;
  height: 1px;
  animation-delay: 4s;
}

.line-4 {
  top: 75%;
  left: -50%;
  width: 200%;
  height: 1px;
  animation-delay: 6s;
}

.line-5 {
  top: 85%;
  left: -50%;
  width: 200%;
  height: 1px;
  animation-delay: 1s;
}

@keyframes networkFlow {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* 浮动教育图标 */
.floating-icons {
  position: absolute;
  width: 100%;
  height: 100%;
}

.icon {
  position: absolute;
  font-size: 24px;
  opacity: 0.6;
  animation: floatUpDown 6s infinite ease-in-out;
}

.icon-1 { top: 20%; left: 10%; animation-delay: 0s; }
.icon-2 { top: 30%; right: 15%; animation-delay: 1s; }
.icon-3 { top: 60%; left: 5%; animation-delay: 2s; }
.icon-4 { top: 70%; right: 20%; animation-delay: 3s; }
.icon-5 { top: 40%; left: 8%; animation-delay: 4s; }
.icon-6 { top: 80%; right: 10%; animation-delay: 5s; }

@keyframes floatUpDown {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

/* 几何图案 */
.geometric-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.shape {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: rotateShape 20s infinite linear;
}

.shape-1 {
  top: 10%;
  right: 20%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  animation-delay: 0s;
}

.shape-2 {
  bottom: 20%;
  left: 15%;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  animation-delay: 5s;
}

.shape-3 {
  top: 50%;
  right: 10%;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 50px solid rgba(255, 255, 255, 0.05);
  animation-delay: 10s;
}

@keyframes rotateShape {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 主容器 */
.main-container {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: 0;
}

/* 左侧品牌区域 */
.brand-section {
  flex: 1;
  padding: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.brand-content {
  max-width: 600px;
  color: white;
}

.brand-logo {
  display: flex;
  align-items: center;
  margin-bottom: 70px;
}

.logo-icon {
  width: 120px;
  height: 120px;
  margin-right: 35px;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

.logo-text h1 {
  font-size: 56px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #ffffff, #e3f2fd);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.logo-text p {
  font-size: 20px;
  margin: 12px 0 0 0;
  opacity: 0.9;
  font-weight: 300;
  letter-spacing: 1px;
}

.brand-features {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.feature-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 18px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.feature-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(10px);
}

.feature-icon {
  font-size: 42px;
  margin-right: 25px;
  width: 70px;
  text-align: center;
}

.feature-text h3 {
  font-size: 22px;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.feature-text p {
  font-size: 16px;
  margin: 0;
  opacity: 0.8;
  line-height: 1.5;
}

/* 右侧登录区域 */
.login-section {
  flex: 1;
  padding: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card-wrapper {
  width: 100%;
  max-width: 750px;
}

.login-card-header {
  text-align: center;
  margin-bottom: 50px;
  color: white;
}

.login-card-header h2 {
  font-size: 42px;
  font-weight: 600;
  margin: 0 0 20px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.login-card-header p {
  font-size: 18px;
  opacity: 0.9;
  margin: 0;
  font-weight: 300;
}

/* 登录卡片 */
.login-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 80px 70px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-height: 600px;
}

/* 标签页样式 */
.login-tabs {
  display: flex;
  margin-bottom: 55px;
  background: rgba(59, 130, 246, 0.05);
  border-radius: 14px;
  padding: 10px;
  box-shadow: inset 0 2px 4px rgba(59, 130, 246, 0.08);
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 30px;
  cursor: pointer;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 600;
  color: rgba(59, 130, 246, 0.7);
  transition: all 0.3s ease;
  position: relative;
  background: rgba(59, 130, 246, 0.03);
}

.tab-item.active {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  box-shadow: 
    0 2px 8px rgba(37, 99, 235, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}

/* 表单样式 */
.login-form {
  width: 100%;
}

.input-group {
  margin-bottom: 35px;
}

.input-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.sms-input-group {
  display: flex;
  gap: 15px;
  align-items: flex-end;
}

.sms-input {
  flex: 1;
}

.sms-btn {
  white-space: nowrap;
  min-width: 140px;
  height: 64px;
  font-size: 15px;
  font-weight: 500;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
  color: #495057 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

.sms-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #e9ecef, #dee2e6) !important;
  border-color: #ced4da !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* 输入框样式覆盖 */
:deep(.business-input .el-input__wrapper) {
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: none;
  padding: 20px 24px;
  background: #ffffff;
  transition: all 0.3s ease;
  height: 64px;
}

:deep(.business-input .el-input__wrapper:hover) {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.05);
}

:deep(.business-input .el-input__wrapper.is-focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

:deep(.business-input .el-input__inner) {
  color: #1f2937;
  font-size: 16px;
  font-weight: 400;
}

:deep(.business-input .el-input__inner::placeholder) {
  color: #9ca3af;
}

:deep(.business-input .el-input__prefix) {
  color: #6b7280;
}

/* 登录按钮样式 */
.business-login-btn {
  width: 100%;
  height: 68px;
  font-size: 18px;
  font-weight: 600;
  margin: 40px 0 35px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.business-login-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
}

.btn-arrow {
  font-size: 18px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.business-login-btn:hover .btn-arrow {
  transform: translateX(5px);
}

/* 辅助链接样式 */
.helper-links {
  display: flex;
  justify-content: space-between;
  margin-bottom: 35px;
  flex-wrap: wrap;
  gap: 15px;
}

:deep(.helper-link) {
  font-size: 15px;
  color: #6b7280 !important;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

:deep(.helper-link:hover) {
  color: #3b82f6 !important;
}

/* 其他登录方式 */
.other-login {
  text-align: center;
}

.divider {
  position: relative;
  margin-bottom: 25px;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 500;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e5e7eb;
  z-index: 1;
}

.divider span {
  background: rgba(255, 255, 255, 0.95);
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.social-login-group {
  display: flex;
  justify-content: center;
}

.social-login-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 25px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  color: #374151;
}

.social-login-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.social-icon {
  font-size: 20px;
  color: #07c160;
}

/* 对话框样式增强 */
:deep(.business-dialog .el-dialog) {
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

:deep(.business-dialog .el-dialog__header) {
  padding: 30px 30px 20px;
  border-bottom: 1px solid #f1f5f9;
}

:deep(.business-dialog .el-dialog__title) {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

:deep(.business-dialog .el-dialog__body) {
  padding: 30px;
}

.verify-code-input {
  display: flex;
  gap: 15px;
  align-items: center;
}

.verify-btn {
  white-space: nowrap;
  min-width: 140px;
  height: 48px;
  font-size: 14px;
  font-weight: 500;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
  color: #495057 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

.verify-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #e9ecef, #dee2e6) !important;
  border-color: #ced4da !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding-top: 20px;
}

/* 自动填入验证码选项样式 */
.auto-fill-option {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
}

.auto-fill-text {
  font-size: 12px;
  color: #666;
  margin-left: 4px;
}

.auto-fill-option .el-checkbox {
  --el-checkbox-font-size: 12px;
}

.auto-fill-option .el-checkbox__label {
  font-size: 12px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-container {
    flex-direction: column;
  }
  
  .brand-section {
    padding: 40px 20px;
  }
  
  .login-section {
    padding: 20px;
  }
  
  .brand-logo {
    flex-direction: column;
    text-align: center;
  }
  
  .logo-icon {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .feature-item {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .brand-section {
    padding: 30px 15px;
  }
  
  .login-section {
    padding: 15px;
  }
  
  .login-card {
    padding: 30px 25px;
  }
  
  .login-card-header h2 {
    font-size: 28px;
  }
  
  .logo-text h1 {
    font-size: 36px;
  }
  
  .sms-input-group {
    flex-direction: column;
    gap: 15px;
  }
  
  .sms-btn {
    width: 100%;
  }
  
  .helper-links {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 25px 20px;
  }
  
  .business-login-btn {
    height: 50px;
    font-size: 15px;
  }
  
  .tab-item {
    padding: 12px 15px;
    font-size: 14px;
  }
}
</style>